<template>
  <el-dialog
    v-model="centerDialogVisible"
    width="550"
    style="height: 500px; overflow: auto; margin-top: 20px; border-radius: 10px; padding: 15px"
    :before-close="closeDia"
  >
    <template #header="{ titleId, titleClass }">
      <div class="my-header">
        <div :id="titleId" :class="titleClass">
          新增用户
          <el-tooltip
            class="box-item"
            effect="dark"
            content="用户名只能由字母和数字组成"
            placement="top-start"
          >
            <el-icon><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
      </div>
    </template>
    <div>
      昵称：<el-input
        placeholder="请输入昵称"
        style="width: 200px"
        class="finp"
        clearable
        v-model="form.nickname"
      ></el-input
      ><br />
      账号：<el-input
        placeholder="请输入账号"
        style="width: 200px"
        class="finp"
        clearable
        @blur="Count"
        v-model="form.username"
        :class="{ active: rules.username }"
      ></el-input
      ><span class="tips" v-show="rules.username">账号不能为空！</span><br />
      密码：<el-input
        placeholder="请输入密码"
        style="width: 200px"
        class="finp"
        clearable
        @blur="Pass"
        v-model="form.password"
        :class="{ active: rules.password }"
      ></el-input
      ><span class="tips" v-show="rules.password">密码不能为空！</span><br />
      邮箱：<el-input
        placeholder="请输入邮箱"
        style="width: 200px"
        class="finp"
        clearable
        v-model="form.email"
      ></el-input
      ><br />
      <div style="display: flex">
        <div>
          <div style="margin-top: 20px">上传头像</div>
        </div>
        <div>
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8080/files/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon
              v-else
              class="avatar-uploader-icon"
              style="width: 100px; height: 100px; background: #eee"
            >
              <Plus />
            </el-icon>
          </el-upload>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDia">取消</el-button>
        <el-button type="primary" @click="submit"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import request from '@/util/request'
import { ElMessage, ElNotification } from 'element-plus'
import { ref } from 'vue'
import titleUtil from '@/util/titleUtil'

const centerDialogVisible = ref(false)

const emit = defineEmits(['insert-user'])

const open = () => {
  centerDialogVisible.value = true
}

const rules = ref({
  username: false,
  password: false
})

const form = ref({
  nickname: '',
  username: '',
  password: '',
  email: '',
  avatar: ''
})

const imageUrl = ref('')

const handleAvatarSuccess = (response, uploadFile) => {
  console.log('返回的数据', response, uploadFile)
  form.value.avatar = response.data.flag
  imageUrl.value = response.data.path
}

const submit = () => {
  if (rules.value.username || rules.value.password) {
    ElMessage.warning('抱歉，账号密码不能为空')
    return
  }

  form.value.username = titleUtil.rulesChAndSpace(form.value.username)
  if (form.value.username === '') {
    ElNotification.warning('抱歉，用户名不能包含特殊字符')
  }
  request
    .post('/admin/user/insert', form.value)
    .then((res) => {
        ElMessage.success('添加成功')
        emit('insert-user')
      closeDia()
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        // ElMessage.error('出错了', err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const Count = () => {
  if (form.value.username.trim() === '') {
    rules.value.username = true
  } else {
    rules.value.username = false
  }
}

const Pass = () => {
  if (form.value.password.trim() === '') {
    rules.value.password = true
  } else {
    rules.value.password = false
  }
}

const closeDia = () => {
  form.value = {
    nickname: '',
    username: '',
    password: '',
    email: '',
    avatar: ''
  }
  rules.value = {
    username: false,
    password: false
  }
  centerDialogVisible.value = false
}

defineExpose({
  open
})
</script>

<style scoped>
.avatar-uploader {
  width: 100px;
  height: 100px;
  margin: 20px;
}
.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.finp {
  margin: 10px;
}

.active {
  border: rgb(255, 47, 0) 1px solid;
  border-radius: 5px;
}

.tips {
  color: #ff4400;
  font-size: 11px;
}
</style>
